<template>
  <div>
    <van-nav-bar title="生成订单" left-arrow @click-left="$router.back()">
      <template #right>
        <van-icon name="ellipsis" />
      </template>
    </van-nav-bar>
    <div class="header">
      <div class="left">
        <p class="name">{{ addressData.userName + addressData.userPhone }}</p>
        <p class="address">
          {{
            addressData.provinceName +
            addressData.cityName +
            addressData.regionName +
            addressData.detailAddress
          }}
        </p>
      </div>
      <div class="right"><van-icon @click="clickArrow" name="arrow" /></div>
    </div>
    <van-card
      v-for="item in cartList"
      :key="item.goodsId"
      :num="item.goodsCount"
      :price="item.sellingPrice"
      :title="item.goodsName"
      :thumb="item.goodsCoverImg"
    />
    <div class="footer">
      <div class="price">
        <p class="price-title">商品金额</p>
        <p class="price-num">￥{{ CalPrice | moneyFormat }}</p>
      </div>
      <button class="btn" @click="clickBtn">生成订单</button>
    </div>
    <van-action-sheet
      v-model="show"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @cancel="onCancel"
      @select="selectItem"
    />
  </div>
</template>

<script>
import {
  APIgetAddressDetail,
  APIgetOrder,
  APIsaveOrder,
  APIpaySuccess,
} from "@/http/index.js";
import Vue from "vue";
import { Toast, Card, ActionSheet } from "vant";

Vue.use(Card).use(ActionSheet);

export default {
  name: "CreateOrder",
  props: [],
  data() {
    return {
      cartList: [],
      addressData: {},
      show: false,
      actions: [{ name: "微信支付" }, { name: "支付宝支付" }],
      orderNo: 0,
      payFlag: 1,
    };
  },
  methods: {
    selectItem(val) {
      //console.log(val);
      APIsaveOrder(
        this.$route.params.addressId,
        localStorage.getItem("cartitemids").split(",")
      ).then((res1) => {
        if (res1.resultCode == 200) {
          this.orderNo = res1.data;
        }
      });
      if (val.name == "微信支付") {
        this.payFlag = 1;
      } else if (val.name == "支付宝支付") {
        this.payFlag = 2;
      }

      setTimeout(() => {
        APIpaySuccess(this.orderNo, this.payFlag).then((res2) => {
          if (res2.resultCode == 200) {
            Toast("支付成功");
            this.$router.push("/myorder");
          }
        });
      }, 500);
    },
    clickBtn() {
      this.show = true;
    },
    onCancel() {
      Toast("取消");
      this.show = false;
    },
    clickArrow() {
      this.$router.push("/addressList");
    },
  },
  computed: {
    CalPrice() {
      return this.cartList.reduce((prev, next) => {
        return prev + next.goodsCount * next.sellingPrice;
      }, 0);
    },
  },
  mounted() {
    //console.log(JSON.stringify(localStorage.getItem("cartitemids").split(',')))
    APIgetOrder(localStorage.getItem("cartitemids")).then((res1) => {
      //console.log(res1)
      if (res1.resultCode == 200) {
        this.cartList = res1.data;
      }
    });
    APIgetAddressDetail(this.$route.params.addressId).then((res2) => {
      //console.log("res2===>",res2)
      if (res2.resultCode == 200) {
        this.addressData = res2.data;
      }
    });
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.header {
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
}
.footer {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  box-sizing: border-box;
  padding: 10px;
  .price {
    display: flex;
    justify-content: space-between;
    .price-num {
      color: red;
    }
  }
  .btn {
    background-color: red;
    color: #fff;
    width: 100%;
    height: 40px;
    border-radius: 5px;
    border: none;
  }
}
</style>
